<template>
  <div class="transaction-history">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>📊 交易记录</h2>
      <p class="subtitle">查看您的账户交易历史</p>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar-group">
      <div class="filter-row">
        <div class="filter-item">
          <label>时间范围</label>
          <select v-model="dateRange" class="filter-select">
            <option value="30">最近30天</option>
            <option value="7">最近7天</option>
            <option value="all">全部时间</option>
          </select>
        </div>
        <div class="filter-item">
          <label>交易类型</label>
          <select v-model="transactionType" class="filter-select">
            <option value="">全部类型</option>
            <option value="存款">存款</option>
            <option value="取款">取款</option>
            <option value="转出">转出</option>
            <option value="转入">转入</option>
          </select>
        </div>
        <div class="filter-item">
          <label>金额范围</label>
          <select v-model="amountRange" class="filter-select">
            <option value="">全部金额</option>
            <option value="0-1000">0-1000元</option>
            <option value="1000-5000">1000-5000元</option>
            <option value="5000-10000">5000-10000元</option>
            <option value="10000+">10000元以上</option>
          </select>
        </div>
        <div class="filter-item search-item">
          <label style="visibility:hidden">搜索</label>
          <input v-model="searchKeyword" type="text" class="search-input" placeholder="搜索交易记录..." />
        </div>
        <button class="export-btn" @click="exportRecords">导出记录</button>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-content">
          <h4>交易笔数</h4>
          <p class="stat-amount">{{ filteredTransactions.length }}</p>
        </div>
      </div>
    </div>

    <!-- 交易记录列表 -->
    <div class="transactions-section">
      <div class="section-header">
        <h3>交易记录</h3>
        <p class="record-count">共 {{ filteredTransactions.length }} 条记录</p>
      </div>
      <div v-if="filteredTransactions.length > 0" class="transaction-card-list">
        <div v-for="tx in filteredTransactions" :key="tx.tradeID" class="transaction-card">
          <div class="card-left">
            <div class="tx-type">{{tx.cardID}}</div>
          </div>
          <div class="card-center">
            <div class="tx-remark">{{tx.tradeType}}</div>
          </div>
          <div class="card-right">
            <div :class="['tx-amount', tx.tradeMoney > 0 ? 'plus' : 'minus']">
              ￥{{ Math.abs(tx.tradeMoney).toLocaleString() }}
            </div>
            <div class="tx-time">{{ formatDate(tx.tradeDate) }}</div>
          </div>
        </div>
      </div>
      <div v-else class="no-data">
        <p>暂无交易记录</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    transactions: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dateRange: "all",
      transactionType: "",
      amountRange: "",
      searchKeyword: "",
    };
  },
  computed: {
    filteredTransactions() {
      return this.transactions
        .filter((tx) => {
          const isInRange = this.isDateInRange(tx.tradeDate);
          const isTypeMatch = !this.transactionType || tx.tradeType === this.transactionType;
          const isAmountMatch = this.isAmountInRange(tx.tradeMoney);
          const isSearchMatch = !this.searchKeyword || tx.cardID.includes(this.searchKeyword);
          return isInRange && isTypeMatch && isAmountMatch && isSearchMatch;
        })
        .sort((a, b) => new Date(b.tradeDate) - new Date(a.tradeDate));
    },
    totalIncome() {
      return this.filteredTransactions.reduce((sum, tx) => (tx.tradeMoney > 0 ? sum + tx.tradeMoney : sum), 0);
    },
    totalExpense() {
      return this.filteredTransactions.reduce((sum, tx) => (tx.tradeMoney < 0 ? sum + Math.abs(tx.tradeMoney) : sum), 0);
    },
    netIncome() {
      return this.totalIncome - this.totalExpense;
    },
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    },
    formatCurrency(amount) {
      return amount.toLocaleString();
    },
    isDateInRange(date) {
      if (this.dateRange === "all") return true;
      const days = parseInt(this.dateRange);
      const cutoff = new Date();
      cutoff.setDate(cutoff.getDate() - days);
      return new Date(date) >= cutoff;
    },
    isAmountInRange(amount) {
      if (!this.amountRange) return true;
      const [min, max] = this.amountRange.split("-").map(Number);
      if (this.amountRange.includes("+")) return amount >= min;
      return amount >= min && amount <= max;
    },
    searchTransactions() {
      // 触发筛选逻辑
    },
    exportRecords() {
      // 导出为 CSV 文件
      const csvContent = "data:text/csv;charset=utf-8," + [
        ["交易ID", "交易日期", "交易类型", "交易金额", "备注", "卡号"].join(","),
        ...this.filteredTransactions.map((tx) => [
          tx.tradeID,
          tx.tradeDate,
          tx.tradeType,
          tx.tradeMoney,
          tx.remark,
          tx.cardID,
        ].join(",")),
      ].join("\n");
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", "transactions.csv");
      document.body.appendChild(link);
      link.click();
    },
    refreshRecords() {
      // 刷新数据
    },
  },
};
</script>

<style scoped>
/* 统一配色方案 */
:root {
  --primary-color: #4CAF50;
  --secondary-color: #2196F3;
  --background-color: #f5f5f5;
  --text-color: #333;
  --highlight-color: #FFC107;
}

/* 页面头部 */
.page-header {
  text-align: center;
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  color: var(--primary-color);
}

.page-header .subtitle {
  font-size: 16px;
  color: var(--text-color);
}

/* 筛选栏 */
.filter-bar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-item {
  display: flex;
  flex-direction: column;
}

.filter-select, .search-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn, .export-btn, .refresh-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn {
  background-color: var(--primary-color);
  color: black;
}

.export-btn {
  background-color: #3b82f6;
  padding: 9px 12px;
  color: black;
}

.refresh-btn {
  background-color: var(--highlight-color);
  color: black;
}

.search-btn:hover, .export-btn:hover, .refresh-btn:hover {
  opacity: 0.9;
}

/* 统计信息 */
.stats-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  flex: 1 1 calc(25% - 20px);
  min-width: 200px;
  text-align: center;
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.stat-content h4 {
  font-size: 18px;
  margin-bottom: 4px;
}

.stat-amount {
  font-size: 20px;
  font-weight: bold;
}

.income {
  color: var(--primary-color);
}

.expense {
  color: var(--secondary-color);
}

/* 交易记录列表 */
.transactions-section {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.transaction-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transaction-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fafafa;
}

.tx-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.tx-type {
  font-size: 14px;
  font-weight: bold;
}

.tx-remark {
  font-size: 14px;
  color: var(--text-color);
}

.tx-amount {
  font-size: 16px;
  font-weight: bold;
}

.plus {
  color: var(--primary-color);
}

.minus {
  color: var(--secondary-color);
}

.tx-time {
  font-size: 12px;
  color: #999;
}

.no-data {
  text-align: center;
  font-size: 16px;
  color: #999;
}
</style>